<template>
  <div id="nav">    
    <template v-for="r in $router.options.routes.filter(e=>!!e.name)" :key="r.name">
      <router-link :to="r.path">{{r.name}}</router-link>
    </template>
  </div>
  <div>      
      <router-view />   
  </div>
</template>

<style>
#nav {
  text-align: center;
  color: #2c3e50;
  padding: 20px;
  position: sticky;
  top: 0;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
  margin-right: 1em;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
canvas {
  border: 1px solid #eee;
  width: 900px;
  height: 810px;
  display: block;
  margin: auto;
}
</style>
